<template>
    <view v-if="pageData">
        <u-navbar
            title="预定订单"
            @leftClick="leftClick"
            :autoBack="true"
            placeholder
            :leftIcon="leftIcon"
            :titleStyle="titleStyle">
        </u-navbar>

        <view class="Heads">订单状态：{{ orderState }}</view>
        <!-- 订单信息 -->
        <view class="Box auto">
            <text class="color_66 size32">订单信息</text>
            <view class="boxs">
                <view class="list m-top24">
                    <text class="name">编号:</text>
                    <text class="black size30">{{ info.scan_order_code }}</text>
                </view>
                <view class="list m-top24" v-if="pageData.config_name">
                    <text class="name">门店:</text>
                    <text class="black size30">{{ pageData.config_name }}</text>
                </view>
                <view class="list m-top24">
                    <text class="name">商品:</text>
                    <text class="black size30">{{ site_time.name }}</text>
                </view>
                <view class="list m-top24">
                    <text class="name">时间:</text>
                    <text class="black size30">{{ site_time.open_date_time }}</text>
                </view>
                <view class="list m-top24">
                    <text class="name">金额:</text>
                    <text class="black size30">{{ info.order_price }}</text>
                </view>

                <view class="list m-top24" v-if="info.sites_detail">
                    <text class="name">数量:</text>
                    <text class="black size30">{{ info.sites_detail.length }}</text>
                </view>
                <view class="list m-top24">
                    <text class="name">状态:</text>
                    <text class="black size30">{{ orderState }}</text>
                </view>
            </view>
        </view>

        <view class="Wrapper" v-if="info.state == 3">
            <text class="black size28">出示二维码或劵号即可使用</text>
            <view class="CodeBox">
                <image :src="$imgUrls(info.qr_code)" mode="aspectFill" class="codeImg"></image>
            </view>
            <text class="black size28">劵码：{{ info.scan_order_code }}</text>
        </view>

        <!-- 顾客信息 -->
        <view class="Box auto m-top30">
            <text class="color_66 size32">顾客信息</text>
            <view class="boxs">
                <view class="list m-top24">
                    <text class="name">日期:</text>
                    <text class="black size30">{{ info.add_time }}</text>
                </view>
                <view class="list m-top24">
                    <text class="name">姓名:</text>
                    <text class="black size30">{{ info.user_name }}</text>
                </view>
                <view class="list m-top24">
                    <text class="name">电话:</text>
                    <text class="black size30">{{ info.user_tel }}</text>
                </view>
                <view class="list m-top24">
                    <text class="name">桌号:</text>
                    <view class="zhjils">
                        <view class="li" v-for="(item, index) in info.sites_detail" :key="index"
                            >{{ item.type_name }}
                            {{ item.name }}
                        </view>
                    </view>
                </view>

                <view class="list">
                    <text class="name">摄影:</text>
                    <text class="black size30">{{ pageData.photography_date_str }}</text>
                </view>
                <view class="list m-top10">
                    <text class="name">妆造:</text>
                    <view class="zhjils">
                        <block v-for="(item, index) in info.sites_detail" :key="index">
                            <view class="li" v-if="item.make_up_date_str"
                                >{{ item.make_up_date_str }}
                            </view>
                        </block>
                    </view>
                </view>

                <view class="list m-top10" v-if="info.coupon_discount && info.coupon_discount > 0">
                    <text class="name">妆造优惠:</text>
                    <text class="black size30">￥{{ info.coupon_discount }}</text>
                </view>
                <!-- <view class="list d-flex a-center">
                    <view class="d-flex a-center">
                        <text class="name">妆造:</text>
                        <text class="black size30 redbor">{{
                            info.sites_detail[0].make_up_date_str
                        }}</text>
                    </view>
                    <text class="name">妆造:</text>
                    <view class="zhjils redbor">
                        <view class="li" v-for="(item, index) in info.sites_detail" :key="index"
                            >{{ item.make_up_date_str }}
                        </view>
                    </view>
                    <view
                        class="d-flex a-center"
                        v-if="info.force_refuse_make_up && info.force_refuse_make_up == 1">
                        <text class="color_66 size28">已退款：</text>
                        <text class="black size30">{{ info.force_refuse_make_up_money }}</text>
                    </view>
                </view> -->
            </view>
        </view>

        <image
            :src="$imgUrls(pageData.game_background)"
            mode="widthFix"
            class="rows m-top20"
            @click="toGame"></image>

        <view class="footer">
            <view class="row j-centert p-top30 p-bot30" v-if="info.state == 3">
                <view class="btns btnOne" @click="toLetter">邀请函</view>
                <view class="btns refund" @click="toRefund">申请退款</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                code: 'https://msraimgcdn.mogoie.com/6142/1735177404230.jpg',
                titleStyle: {
                    fontWeight: 'bold',
                },
                order_id: '7335', // 7335
                pageData: '',
                info: '',
                site_time: '',
                leftIcon: 'arrow-left', // home
            };
        },
        onLoad(opt) {
            if (opt.order_id) this.order_id = opt.order_id;
            if (opt.home) this.leftIcon = 'home';
        },
        onShow() {
            this.getLockOrder();
        },
        methods: {
            toGame() {
                if (!this.pageData.gid) return;
                if (this.pageData.pop_up_tips) return this.$Toast(`${this.pageData.pop_up_tips}`);
                if (this.pageData.gid == 'default') {
                    this.toUrl(`/otherPage/lottery/shark?cid=${this.pageData.cid}`);
                } else if (this.pageData.gid == 'marquee') {
                    this.toUrl(`/otherPage/lottery/good_luck?cid=${this.pageData.cid}`);
                } else if (this.pageData.gid == 'slotMachine') {
                    this.toUrl(`/otherPage/lottery/tiger?cid=${this.pageData.cid}`);
                } else if (this.pageData.gid == 'bigWheel') {
                    this.toUrl(`/otherPage/lottery/roulette?cid=${this.pageData.cid}`);
                } else if (this.pageData.gid == 'blindBox') {
                    this.toUrl(`/otherPage/lottery/blindBox?cid=${this.pageData.cid}`);
                } else if (this.pageData.gid == 'twistedEgg') {
                    this.toUrl(`/otherPage/lottery/gashapon?cid=${this.pageData.cid}`);
                } else if (this.pageData.gid == 'drawCards') {
                    // 抽卡
                    this.toUrl(`/otherPage/lottery/drawCard?cid=${this.pageData.cid}`);
                }
            },
            leftClick() {
                if (this.leftIcon == 'home') {
                    uni.reLaunch({
                        url: '/pages/index/index',
                    });
                } else {
                    this.$back();
                }
            },
            getLockOrder() {
                this.$http
                    .get({
                        url: '/SiteApiV2/getLockOrder',
                        data: {
                            order_id: this.order_id,
                        },
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        this.pageData = result;
                        this.info = result.info;
                        this.site_time = result.site_time;
                    });
            },

            toLetter() {
                this.toUrl(`letter?order_id=${this.order_id}`);
            },
            toRefund() {
                this.toUrl(
                    `refund?price=${this.info.order_price}&name=${this.site_time.name}&order_id=${this.order_id}`
                );
            },
        },
        computed: {
            orderState() {
                if (!this.info) return;
                const obj = {
                    1: '待使用',
                    2: '已使用',
                    3: '待核销',
                    4: '已过期',
                    5: '已退款',
                    6: '退款中',
                };
                if (this.info.state == 3 && this.info.tail_price == 0) return '待核销';
                return obj[this.info.state];
            },
        },
    };
</script>
<style lang="scss">
    page {
        background-color: $pages;
    }
</style>
<style lang="scss" scoped>
    .Heads {
        width: 100%;
        height: 140rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #cc6652;
        font-size: 34rpx;
        font-weight: bold;
    }

    .Wrapper {
        width: 710rpx;
        background-color: #fffcf7;
        padding: 24rpx;
        border-radius: 10rpx;
        margin: 30rpx auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .CodeBox {
            width: 440rpx;
            height: 400rpx;
            background-color: #fff;
            margin: 24rpx auto;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10rpx;

            .codeImg {
                width: 340rpx;
                height: 340rpx;
            }
        }
    }

    .Box {
        width: 710rpx;
        background-color: #fffcf7;
        padding: 24rpx;
        border-radius: 10rpx;

        display: flex;
        flex-direction: column;

        .boxs {
            width: 100%;
            display: flex;
            flex-direction: column;

            .list {
                display: flex;

                .name {
                    color: #666;
                    font-size: 28rpx;
                    margin-right: 30rpx;
                }

                .zhjils {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .li {
                        padding: 6rpx 24rpx;
                        border-radius: 8rpx;
                        background-color: #efebe2;
                        color: #000;
                        font-size: 26rpx;
                        margin-right: 12rpx;
                        margin-bottom: 20rpx;
                    }
                }
            }
        }
    }

    .footer {
        width: 100%;
        padding: 50rpx 0;

        .btns {
            width: 280rpx;
            height: 84rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10rpx;
            font-size: 30rpx;
            margin: 0 20rpx;
        }

        .btnOne {
            background-color: #e5e5e5;
            border: 1rpx solid #ccc;
            color: #333;
        }

        .refund {
            background-color: #cc6652;
            border: 1rpx solid #cc6652;
            color: #fff;
        }
    }
</style>
